/* cyrillic-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/firasans/v11/va9E4kDNxMZdWfMOD5VvmojLeTY.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/firasans/v11/va9E4kDNxMZdWfMOD5Vvk4jLeTY.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/firasans/v11/va9E4kDNxMZdWfMOD5Vvm4jLeTY.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/firasans/v11/va9E4kDNxMZdWfMOD5VvlIjLeTY.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/firasans/v11/va9E4kDNxMZdWfMOD5VvmIjLeTY.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/firasans/v11/va9E4kDNxMZdWfMOD5VvmYjLeTY.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/firasans/v11/va9E4kDNxMZdWfMOD5Vvl4jL.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnZKveSxf6TF0.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnZKveQhf6TF0.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnZKveShf6TF0.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnZKveRRf6TF0.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnZKveSRf6TF0.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnZKveSBf6TF0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnZKveRhf6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnLK3eSxf6TF0.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnLK3eQhf6TF0.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnLK3eShf6TF0.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnLK3eRRf6TF0.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnLK3eSRf6TF0.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnLK3eSBf6TF0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnLK3eRhf6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Russo One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/russoone/v9/Z9XUDmZRWg6M1LvRYsHOy8mJrrg.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Russo One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/russoone/v9/Z9XUDmZRWg6M1LvRYsHOwcmJrrg.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Russo One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/russoone/v9/Z9XUDmZRWg6M1LvRYsHOz8mJ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*объявление глобальных переменных*/
:root {
    --font-family: Russo One, sans-serif;
}

body {
    /*Подключили шрифты*/
    font-family: var(--font-family);
    font-weight: 400;
	background-image: url(../img/4096х2160.png); 
	background-size: cover;
}




.myInfoblok
{
	width: calc(20% - 5px );
    min-width: 190px;
    display: inline;
    margin-top: 6px;
    display: inline-block;
    vertical-align: top;
}

.myInfoblok .myBtn {
	width: 54px;
    height: 40px;
    background-image: url(../img/button.png);
	background-size: cover;
    cursor: pointer;    
    display: inline-block;
    vertical-align: middle;    
}


.myInfoblok img {
	width: 40px;
	margin-left: 20px;  
    display: inline-block;
    vertical-align: middle; 	
}

.myInfoblok .myBtn.my-class{
	background-image: url(../img/button_p.png); 
}

.myInfoblok .myBtn:hover {

	/*background-image: url(../img/button_p.png); */
}


.myInfoblok .myInfoblokName
{
    font-family: Fira Sans;
    font-size: 0.7em;
    color: #FAFAFA;
    vertical-align: middle;
    display: inline-block;
    width: calc( 100% - 70px );
}
	.myInfoblok a .myInfoblokName 
	{
		text-decoration: inherit;
	}

.myInfoblok .myInfoblokName.my-class {
color: #FFFF00;

}

.myInfoblok .myInfoblokDes ul
{
    font-family: Fira Sans;
    font-size: 0.4em;
    color: #FAFAFA;
    opacity: 0.9;
    padding: 0px 0px 0px 22px;
    margin: 6px 0px;
}


.mainBlock
{
	padding-top: 12px;
}

.mainBlock h1
{
	background: linear-gradient(0deg, #D6E7F7 -25.58%, #B1BEFC 100%);
	font-size: 1.5em;    
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.mainBlock .mainLeft
{	
    color: #C3D2F9;
    float: right;
    font-size: 1.0em;
    padding-top: 10px;
	margin: 0px;
}
.mainBlock .mainText
{
	font-family: Fira Sans;
    font-weight: 500;
    text-align: justify;
    color: rgba(250, 250, 250, 0.7);
    margin-top: 10px;
}

.infoblok 
{
	margin-top: 5px;
}
.infoblok .infoblokTitle
{
	margin: 0px 2px;
}
.infoblok .infoblokTitle img
{
	width: 28px;
}
.infoblok .infoblokTitle div
{
	color: #FBFBFB;
    display: inline;
    font-size: 1.3em;
	margin-right: 20px;
}

.infoblok .infoblokTitle h2
{
	color: #FBFBFB;
    display: inline;
    font-size: 1.3em;
	margin: 0px 20px 0px 0px;
	font-weight: normal;
}

.infoblok .infoblokText
{
	font-family: Fira Sans;
    color: #FAFAFA;
    margin-top: 3px;
    font-size: 0.5em;
}
footer
{
	text-align: right;
	margin-top: 20px;
}
footer img
{
	width: 30px;
	vertical-align: middle;
}
footer div
{
	font-family: Fira Sans;
	font-size: 0.4em;
	text-align: right;
	color: rgba(250, 250, 250, 0.5);
	display: inline;
	vertical-align: middle;
}
/*------------------------------*/
@media screen and (max-width: 1300px)
{
	.mainBlock h1 
	{
		display: inline-block;
		width: 100%;
		margin: 0px;
		text-align: center;
	}
	.mainBlock .mainLeft 
	{
		display: inline-block;
		text-align: center;
		width: 100%;
		float: none;
		margin: 0px;
	}
	.myInfoblok .myInfoblokName 
	{
		font-size: 0.7em;
		width: calc( 100% - 60px );
	}
}	
@media screen and (max-width: 1024px)
{


	.myInfoblok .myInfoblokDes ul
	{
		font-size: 0.5em;
	}
	.infoblok .infoblokTitle img
	{
		width: 20px;
	}
	.infoblok .infoblokTitle div
	{
		font-size: 1.2em;
		margin-right: 20px;
	}

	.infoblok .infoblokTitle h2
	{
		font-size: 1.2em;
		margin: 0px 20px 0px 0px;
	}
	.myInfoblok img 
	{
		width: 40px;
		margin: 10px 0px 0px 0px;
	}

	
}
@media screen and (max-width: 500px)
{
	body {
		background-image: url(../img/4096х2160_2.png);
		background-size: 100% 100%;
	}
	.infoblok 
	{
		margin-top: 25px;
	}
	.infoblok .infoblokTitle img
	{
		width: 20px;
	}
	.infoblok .infoblokTitle div
	{
		font-size: 1.2em;
		margin-right: 20px;
	}

	.infoblok .infoblokTitle h2
	{
		font-size: 1.0em;
		display: inline-block;
	}
	.infoblok .infoblokText 
	{
		font-size: 0.7em;
	}
	.myInfoblok
	{
		width: 100%;
		border: 1px solid white;
		border-radius: 11px;
	}
	.myInfoblok .myInfoblokName 
	{
		width: calc( 52% - 60px );
		text-align: center;
	}
	.myInfoblok .myInfoblokDes
	{
		width: calc( 48% - 4px );
		display: inline-block;
		vertical-align: middle;
	}
	
	.myInfoblok img 
	{
		width: 40px;
		margin: 10px 0px 10px 10px;
	}
	footer div 
	{
		font-size: 0.5em;
	}

}
@media screen and (min-width: 1301px)
{

	.mainBlock h1 
	{
		display: inline;
	}
	
}

@media screen and (min-width: 1025px) and (max-width: 3500px)
{
	.mainBlock
	{
		box-sizing: border-box;
		margin-left: auto;
		margin-right: auto;
		max-width: 1500px;
	}	
}
@media screen and (min-width: 3500px)
{
	.mainBlock
	{
		box-sizing: border-box;
		margin-left: auto;
		margin-right: auto;
		max-width: calc( 100vw - 400px );
	}
	body 
	{
		font-size: 35px;
	}
	.myInfoblok 	
	{
		width: calc(20% - 10px );
	}
	.myInfoblok .myBtn 
	{
		width: 108px;
		height: 80px;
	}
	.myInfoblok .myInfoblokName 
	{
		width: calc( 100% - 150px );
	}
	.myInfoblok img 
	{
		width: 116px;
	}
	.infoblok .infoblokTitle img 
	{
		width: 60px;
	}
	footer img 
	{
		width: 60px;
	}
}